<template>
    <div class="re-all">
        <img class="img1" style="margin-top: -1px" src="../../assets/aa.jpg"/>
        <div class="re-title">用户注册</div>
            <div class="re-form">
                <el-form :model="ruleForm" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                    <el-form-item  prop="username" label="用户名">
                        <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item  prop="studentId" label="学 号">
                        <el-input v-model="ruleForm.studentId" placeholder="学号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密 码">
                        <el-input v-model="ruleForm.password" placeholder="密码" type="password" ></el-input>
                    </el-form-item>
                    <el-form-item prop="newpassword" label="确认密码">
                        <el-input v-model="ruleForm.newpassword" placeholder="确认密码" type="password"></el-input>
                    </el-form-item>
                    <el-form-item  prop="email" label="邮 箱">
                        <el-input v-model="ruleForm.email" style="width: 190px"  placeholder="邮箱"></el-input>
                        <el-button type="primary"@click="yanzma('email')" v-show="show">点击获取验证码</el-button>
                        <el-button type="primary" v-show="!show" :loading="true">{{count}}s后重试</el-button>
                    </el-form-item>
                    <el-form-item  prop="number" label="验证码">
                        <el-input v-model="ruleForm.number" placeholder="验证码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm" style="width: 100%">立即注册</el-button>
                    </el-form-item>
                </el-form>
                <div class="re-login">已注册，点击<a class="re-a" @click="tologin">登录</a>……</div>
            </div>
        </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    username:'',
                    email:'',
                    password:'',
                    newpassword:'',
                    number:'',
                    studentId:'',
                    id:'',
                },
                show: true,
                count: '',
                timer: null,
            };
        },
        methods: {
            submitForm() {
                if(this.ruleForm.password== this.ruleForm.newpassword){
                    this.$axios.post('text/register?' +
                        'studentId=' + this.ruleForm.studentId +
                        '&username=' + this.ruleForm.username +
                        "&email=" + this.ruleForm.email+
                        "&password=" + this.ruleForm.password+
                        "&number=" + this.ruleForm.number+
                        "&id=" + "1"
                    ).then((res) => {
                        if(res.data.code==200)
                            this.$message({
                                message: '恭喜你，注册成功！！',
                                type: 'success'
                            });
                        else if(res.data.code==101)
                            this.$message.error('验证码输入错误！！');
                        else if(res.data.code==403)
                            this.$message.error(res.data.msg);
                        else
                            this.$message.error('注册失败！！');
                    })
                }
                else {
                    this.$message.error('两次输入的密码不一致！！');
                }

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            tologin(){
                this.$router.push('/login');
            },
            yanzma(email){
                this.$axios.get('/text/queryemail?email='+this.ruleForm.email).then((res) => {
                });
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            }
        }
    }

</script>

<style scoped>
    .img1
    {
        position:absolute;
        height: 100%;
        width: 100%;
        left:0px;
        top:0px;
    }
.re-all{
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,#8e9eab,#eef2f3);
}

    .re-form{
        position: absolute;
        left:0;
        right: 0;
        margin: auto;
        top:250px;
        width:400px;
        height:440px;
        padding:40px;
        border-radius: 5px;
        border: 1px solid #d3e0e9;
        background: #fff;
        box-shadow:0px 0px  10px 5px #aaa;
    }
    .re-title{
        font-size: 60px;
        font-family: 仿宋;
        position: absolute;
        text-align: center;
        color: #f6faff;
        width: 100%;
        top: 100px;

    }
    .re-a{
        color: red;
    }
    .re-login{
        position: absolute;
        right: 10px;
        top: 440px;
    }

</style>
